import React from 'react';
import {Form, Input, Button, Select, DatePicker, Upload, Icon, Checkbox,  Row, Col, Message, Modal, Collapse } from 'antd';
import Region from '../../../components/Region/Region';
import bankJson from '../../../components/bankType/bankTypeJson.js';
import ItemTable from './contractList';
const FormItem = Form.Item;
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
const Panel = Collapse.Panel;
var data = require('../../../../src/components/Region/chinaRegion')

function noop() {
  return false;
}

let uuid = 0;
let Add = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading: false,
      imgList: [],
      activeKey: '1',
      province: '110000', // 省
      city: '110100',  // 城市
      district: '110101', // 区域
      provinceName: '北京市 ', // 省
      cityName: '直辖区',  // 城市
      districtName: '东城区', // 区域
      startTime: null,
      expireTime: null,
      areaId: '110101',
      circumFacility: [], //周边设施
      isFixed: false,
      isExpireTime: 'string',
      isStartTime:'string',
      houseData: {

      },
      setContract: {},
      contractList: [],
      contractData: {},
      enclosureData: {},
      appearance: [],
      credential: [],
      apartment: [],
      contract: [],
      other: [],
      depositEnable: false,
      priviewVisible: false,
      priviewImage: '',
      floor:'',//层
      totalFloor:'',
      province: '',
      city: '',
      district: '',
      districtChange: false,
      credentialArr: [],
      appearanceArr: [],
      apartmentArr: [],
      contractArr: [],
      otherArr: [],
      isOwn: false,
      xAxis: '116.42211',
      yAxis: '39.934477'
    }
  },

  componentDidMount() {
    this.fetchHouse().then(()=> {
      this.getMap();
    })
    this.fetchContract();
    this.fetchEnclosure();
  },

  // 点击获取地址
  getLocation() {
    let detailAddress = this.props.form.getFieldValue('address');
    this.getMap(detailAddress)
  },
  // 地图
  getMap(detailAddress){
    let _me = this;
    let {xAxis, yAxis} = this.state;
    // console.log(xAxis, yAxis)
    var BMap = window.BMap
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(xAxis , yAxis );// 获取覆盖物拖拽当前坐标

    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    var province=_me.state.provinceName;
    var city=_me.state.cityName;
    var district=_me.state.districtName;
    map.setCurrentCity(city);          // 设置地图显示的城市 此项是必须设置的    
    function funMap() {
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 17);
    } 
    var local = new BMap.LocalSearch(map, {
        onSearchComplete: funMap,
        renderOptions:{map: map}
    });
    var address = province + city + district + detailAddress;
    // console.log(address)
    local.setSearchCompleteCallback(function (searchResult) {
    　　var poi = searchResult.getPoi(0);
    // console.log('poi',poi)
        _me.props.form.setFieldsValue({'xAxis': !poi ? _me.state.houseData.xAxis:poi.point.lng})
        _me.props.form.setFieldsValue({'yAxis': !poi ? _me.state.houseData.yAxis:poi.point.lat})
        !poi ? '':map.centerAndZoom(poi.point, 13);
    });

    local.search(address)  // 根据地址定位   

    map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
    map.enableKeyboard();//启动键盘操作地图  
    
    map.centerAndZoom(point, 11);
    map.addEventListener("click", function(e){
      // console.log('经度:'+e.point.lng+' , 纬度: '+e.point.lat);
      var now_point =  new BMap.Point(e.point.lng, e.point.lat );
      marker.setPosition(now_point);//设置覆盖物位置
      _me.props.form.setFieldsValue({'xAxis':e.point.lng, 'yAxis': e.point.lat})
    });
    var marker = new BMap.Marker(point); //创建marker对象
    marker.enableDragging(); //marker可拖拽
    //拖拽结束事件
    marker.addEventListener("dragend", function(e){
      //获取覆盖物位置
      var o_Point_now =  marker.getPosition();
      var lng = o_Point_now.lng;
      var lat = o_Point_now.lat;
      //e.point.lng 地理经度。
      // e.point.lat 地理纬度。
      //alert(e.point.lng + "---, " + e.point.lat);
      get_lng_lat();
      
    })
    map.addOverlay(marker); //在地图中添加marker
    get_lng_lat();
    //获取经纬度
    function get_lng_lat(){
      //返回覆盖物标注的地理坐标。
      var o_Point_now =  marker.getPosition();
      var lng = o_Point_now.lng;
      var lat = o_Point_now.lat;
      // console.log('经度:'+lng+' , 纬度: '+lat);
      _me.props.form.setFieldsValue({'xAxis':lng, 'yAxis': lat})
    }

  },
  handleSubmit(e) {
    e.preventDefault();


    let ids = this.props.location.state;
    let form = this.props.form.getFieldsValue(); console.log(form);
    form.rent =form.rent;
    form.contractPeriod = form.contractPeriod;
    let region = {province: this.state.province, city: this.state.city, district: this.state.district};
    let contract = {timeList: form.paymentWay == 1 ? [] : this.state.contractList};
    let circum = {circumFacility: this.state.circumFacility};
    let paymentWay = {paymentWay: form.paymentWay};
    let firstRentTime = { firstRentTime: Utils.formatDate(form.firstRentTime) };
   // let startTime = this.state.isFixed ? {startTime: ''} : { startTime: this.state.startTime !== null ? Utils.formatDate(this.state.startTime)  : this.state.contractData.startTime };
    let startTime =  { startTime: this.state.startTime !== null ? Utils.formatDate(this.state.startTime)  : this.state.contractData.startTime };
    let expireTime =  { expireTime: form.expireTime };
    let province = {province: this.state.province ? this.state.province : this.state.houseData.province};
    let city = {city: this.state.city ? this.state.city : this.state.houseData.city};
    let district = {district: this.state.district ? this.state.district : this.state.houseData.district};
    let photos = {pictureList: this.state.imgList};
    let params = Object.assign({}, form, circum, region, firstRentTime, startTime, expireTime, photos, ids, contract, province, city, district);
   // console.log('收到表单值：',params);

    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        // console.log('Errors in form!!!');
        return;
      }
      this.setState({
        loading:true
      });
      Utils.sendAjax({
        url: '/tenement/contract/update',
        data: JSON.stringify(params),
        callback: (result)=> {
          if (result.code == 200) {
            this.handleBack();
          } else {
            this.setState({
              loading:false
            });
            Message.error(result.message, 10)
          }
        }
      })
    });
  },

  fetchHouse() {
    return new Promise((resolve, reject) => {
          let state = this.props.location.state;
          console.log(state)
          let params = {
            tenementContractId: state.tenementContractId,
            tenementId: state.tenementId,
            currentPage: state.currentPage,
          };
          let _me = this;
          Utils.sendAjax({
            url: '/tenement/find',
            data: JSON.stringify(params),
            callback: (result)=> {
              if (result.code == 200) {
                let resultData = result.data;
                _me.setState({
                  xAxis: resultData.xAxis,
                  yAxis: resultData.yAxis,
                  houseData: resultData,
                  areaId: resultData.district,
                  province: resultData.province,
                  city: resultData.city,
                  district: resultData.district,
                  provinceName: data[resultData.province][0],
                  cityName: data[resultData.city][0],
                  districtName: data[resultData.district][0],
                  circumFacility: resultData.circumFacility,
                  floor:resultData.floor,
                  totalFloor:resultData.totalFloor,
                  isOwn: resultData.type === 'own' ? true : false,
                })
                resolve();
              } else {
                Message.error(result.message, 10)
              }
            }
          })
    
    })
  },

  fetchContract() {
    let params = this.props.location.state;
    let _me = this;
    Utils.sendAjax({
      url: '/tenement/contract/find',
      data: JSON.stringify(params),
      callback: (result)=> {
        if (result.code == 200) {
          let data = result.data;
          _me.setState({
            contractData: data,
          })
          if (data.paymentWay == -1) {
            _me.setState({
              contractList: data.timeList
            })
          } else {
            let newState = _me.state.setContract;
            newState['rent'] = data.rent;
            newState['startTime'] = data.startTime;
            newState['expireTime'] = data.expireTime;
            _me.setState({
              setContract: newState
            })
          }
          this.changeWay(data.paymentWay);
          this.handleDeposit(data.isDeposit);
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  fetchEnclosure() {
    let params = this.props.location.state;
    let _me = this;
    Utils.sendAjax({
      url: '/tenement/contractAuxiliary/find',
      data: JSON.stringify(params),
      callback: (result)=> {
        if (result.code == 200) {
          let data = result.data;
          _me.setState({
            enclosureData: data,
            imgList: data.pictureList
          })
          this.setImgUrl(data.pictureList);
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  setImgUrl(img) {

    let appearance = [];
    let credential = [];
    let apartment = [];
    let contract = [];
    let other = [];
    let newState = [];
    img.forEach((item, index) => {
      let imgMaps = {
        uid: `tenement-`+index,
        type: item.type,
        status: 'done',
        url: Utils.apiServer + item.url,
        thumbUrl: Utils.apiServer + item.url,
      };
      
      if (item.type == 'credential') {
        credential.push(imgMaps)
      } else if(item.type == 'appearance') {
        appearance.push(imgMaps)
      } else if (item.type == 'apartment') {
        apartment.push(imgMaps)
      } else if (item.type == 'contract') {
        contract.push(imgMaps)
      } else {
        other.push(imgMaps)
      }
      newState.push(imgMaps);
    })
    this.setState({
      credential: credential,
      appearance: appearance,
      apartment: apartment,
      contract: contract,
      other: other,
      imgList: newState,
    })
  },

  handleCheckBox(cid) {
    let newState = cid;
    this.setState({
      circumFacility: newState
    })
  },

  handleDate(field, value) {
    let t = field.target ? field.target.value : Utils.formatDate(value);
    let name = field.target ? field.target.id : field
    let newTime = this.state.setContract;
    newTime[name] = t;
    this.setState({
      setContract: newTime
    });
   // console.log(newTime)
  },
  // 添加一行费用项
  add() {
    const form = this.props.form.getFieldsValue();
    let newArr = this.state.contractList;
    if (!(form.rent && form.startTime && form.expireTime)) {
      return Message.warning('请先填写完租金以及合约时间信息', 10);
    }
    let item = {indexForSort: uuid++, rent: form.rent, startTime: Utils.formatDate(form.startTime),expireTime: form.expireTime,totalRent:form.contractPeriod && form.rent ? form.contractPeriod * form.rent : ''};
    newArr.push(item)
    this.setState({
      contractList: newArr
    })
    let obj = {}
    obj['rent'] = ''
    obj['startTime'] = null
    // obj['expireTime'] = null
    obj['contractPeriod'] = ''
    this.props.form.setFieldsValue(obj);
  },

  synchronData(data) {
    this.setState({
      contractList: data
    })
  },
  handleTime(val) {
   // console.log(val)
    this.setState({
      startTime: val
    })
  },
  changeAreaId(area) {
    
    selectedArea = String(area);
    var selectedProvince = selectedArea.substr(0, 2) + "0000";
    var selectedCity = selectedArea.substr(0, 4) + "00";
    let province = data[selectedProvince][0];
    let city = data[selectedCity][0];
    let district = data[selectedArea][0];
    this.setState({
      province: selectedProvince,
      city: selectedCity,
      district: selectedArea,
      areaId: area,
      districtChange: true,
      provinceName: province,
      cityName: city,
      districtName: district
    })
  },
  
  changeWay(e) {
    console.log(e)
    let fix = e == 1 ? false : true;
    console.log(fix)
    this.setState({
      isFixed: fix
    })
  },

  handleCancel() {
    this.setState({
      priviewVisible: false,
    });
  },

  handleDeposit(value) {
    let flag = value == -1 ? true : false;
    this.setState({
      depositEnable: flag
    })
  },

  deleteImg(file) {
    let newArr = [];
    let credentialPic = [];
    let appearancePic = [];
    let apartmentPic = [];
    let contractPic = [];
    let otherPic = [];
    let credentialArr = this.state.credentialArr;

    let appearanceArr = this.state.appearanceArr;
    let apartmentArr = this.state.apartmentArr;
    let contractArr = this.state.contractArr;
    let otherArr = this.state.otherArr;
    let imgs = this.state.imgList;
    imgs.forEach((img, index)=> {
      if (img.url && img.url !== file.url) {
        newArr.push(img)
      }
    })
      credentialArr.forEach((i,index)=> {
      
      if(i.url[0] && i.url[0] !==file.url){
        credentialPic.push(i)
      }
    })
 
      appearanceArr.forEach((j,index)=> {
      if(j.url[0] && j.url[0] !== file.url){
        appearancePic.push(j)
      }
    })
      apartmentArr.forEach((k,index)=> {
      if(k.url[0] && k.url[0] !== file.url){
        apartmentPic.push(k)
      }
    })
      contractArr.forEach((p,index)=> {
      if(p.url[0] && p.url[0] !== file.url){
        contractPic.push(p)
      }
    })
    otherArr.forEach((r,index)=> {
      if(r.url[0] && r.url[0] !== file.url){
        otherPic.push(r)
      }
    })
    this.setState({
      imgList: newArr,
      credentialArr: credentialPic,
      appearanceArr: appearancePic,
      apartmentArr: apartmentPic,
      contractArr: contractPic,
       otherArr: otherPic
    })
    this.setImgUrl(newArr);
  },

  handleBack() {
    let params = this.props.location.state;
    
    let goPathUrl = '/landlord/houseResource/list'
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },

  handleCollapse(e) {
    this.setState({activeKey: e});
  },

  floor(rule, value, callback) {
    const { validateFields } = this.props.form;
    if (!value) {
      value = '';
    }
    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      callback();
    } else {
      callback('请输入大于0的整数');
    }
    if (value) {
      validateFields(['totalFloor'], {force: true});
    }
    callback();
  },

  totalFloor(rule, value, callback) {

    const { getFieldValue } = this.props.form;
    if (!value) {
      value = '';
    }
    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      if (value && value < parseInt(getFieldValue('floor'))) {
        callback('总楼层不能小于楼层数');
      } else {
        callback();
      }
    } else {

      callback('请输入大于0的整数');
    }
  },

  handleChangeType(value) {
    this.setState({
      isOwn: value === 'own' ? true : false
    })
  },

  render () {
    const { getFieldProps } = this.props.form;
 
    const options = [
      {label: '公交车站', value: '1'},
      {label: '幼儿园', value: '2'},
      {label: '小学', value: '3'},
      {label: '中学', value: '4'},
      {label: '银行', value: '5'},
      {label: '超市', value: '6'},
      {label: '菜场', value: '7'},
      {label: '医院', value: '8'}
    ];
    let _me = this;
    let imgList = this.state.imgList;
   // console.log(imgList)
    let credentialArr = this.state.credentialArr;
    let appearanceArr = this.state.appearanceArr;
    let apartmentArr = this.state.apartmentArr;
    let contractArr = this.state.contractArr;
    let otherArr = this.state.otherArr;
    if (credentialArr.length == 0){
       imgList.map((item)=> {
      if(item.type == 'credential'){
        credentialArr.push({type: 'credential', url: [item.url]})
      }
    })
    }
    //console.log(credentialArr)
      if (appearanceArr.length == 0){
       imgList.map((item)=> {
      if(item.type == 'appearance'){
        appearanceArr.push({type: 'appearance', url: [item.url]})
      }
    })
    }
      if (apartmentArr.length == 0){
       imgList.map((item)=> {
      if(item.type == 'apartment'){
        apartmentArr.push({type: 'apartment', url: [item.url]})
      }
    })
    }
        if (contractArr.length == 0){
       imgList.map((item)=> {
      if(item.type == 'contract'){
        contractArr.push({type: 'contract', url: [item.url]})
      }
    })
    }
        if (otherArr.length == 0){
       imgList.map((item)=> {
      if(item.type == 'other'){
        otherArr.push({type: 'other', url: [item.url]})
      }
    })
    }
    let credential = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.credential,
      beforeUpload(file) {
      //  console.log(file)
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        //if (!isSize) {
        //  Message.error('你选择的图片过大！');
        //  return isSize
        //}
      },
      onChange: function (files) {
     //   console.log(files)
        let imgList = _me.state.imgList;
        let status = files.file.status;
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'credential', url: img});
           credentialArr.push({type: 'credential', url: img});
        //   console.log(credentialArr)
          if(files.fileList.length == credentialArr.length){
              _me.setImgUrl(imgList);
          }
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        _me.deleteImg(file)
      }
    };
    let appearance = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.appearance,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
  
        let imgList = _me.state.imgList;
        let status = files.file.status;
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'appearance', url: img});
           appearanceArr.push({type: 'appearance', url: img})
           if(files.fileList.length == appearanceArr.length){
              _me.setImgUrl(imgList);
          }
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {

        _me.deleteImg(file)
      }
    };

    let apartment = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.apartment,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'apartment', url: img})
         apartmentArr.push({type: 'apartment', url: img})
           if(files.fileList.length == apartmentArr.length){
              _me.setImgUrl(imgList);
          }
        }
        
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
       
        _me.deleteImg(file)
      }
    };

    let contract = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.contract,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'contract', url: img})
           contractArr.push({type: 'contract', url: img})
           if(files.fileList.length == contractArr.length){
              _me.setImgUrl(imgList);
          }
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        
        _me.deleteImg(file)
      }
    };

    let other = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.other,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'other', url: img})
         otherArr.push({type: 'contract', url: img})
           if(files.fileList.length == otherArr.length){
              _me.setImgUrl(imgList);
          }
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
     
      _me.deleteImg(file)
    }
  };

    let houseData = this.state.houseData;
    let contractData = this.state.contractData;
    let startTimes = new Date(this.state.contractData.startTime);
    let enclosureData = this.state.enclosureData;
    let isEnabel = this.props.location.state.tenementContractId == 0 ? false : true;

    let bankItem = bankJson.map((item) => {
      return (
        <Option key={`item-${item.code}`} value={item.code}>{item.name}</Option>
      )
    })

    const disabledDate = function (current) {
      let key = _me.state.startTime ? _me.state.startTime.getTime() : null;
      return current && current.getTime() < key;
    };
    let messages = {
      province : this.state.houseData.province,
      city : this.state.houseData.city,
      district : this.state.houseData.district,
    }

    let forms = this.props.form.getFieldsValue();
  //console.log(forms)
    let rent = forms.rent ? forms.rent : '';
    let startTime = forms.startTime ? Utils.formatDate(forms.startTime) : '' ;
    let contractPeriod = forms.contractPeriod ? parseInt(forms.contractPeriod) : '';
    let startTimeYear = startTime == '' ? '' :  Number(startTime.split("-")[0]);
    let startTimeMonth = startTime == '' ? '' : Number(startTime.split("-")[1]);
    let startTimeDay = startTime == '' ? '' : Number(startTime.split("-")[2]);
   // console.log(startTimeYear,startTimeMonth,startTimeDay)
    // let qixianYear =parseInt(qixian/12);
    // let qixianMonth = qixian>12 ? (qixian%12) : qixian;
    let endTimeYear = '';
    let endTimeMonth = '';
    let endTimeDay = '';
   // console.log(contractPeriod)
    if(contractPeriod > 12) {
      // let endTimeYear = parseInt(qixian/12) + startTimeYear;
      // let endTimeMonth = (startTimeMonth + (qixian%12)) > 12 ? endTimeYear+1 : 
      if((startTimeMonth + contractPeriod%12) > 12) {
          endTimeYear = startTimeYear + parseInt(contractPeriod/12) + 1;
           endTimeMonth = (startTimeMonth + contractPeriod%12)%12;
           endTimeDay = startTimeDay - 1;
      }else {
         endTimeYear = startTimeYear +  parseInt(contractPeriod/12)
         endTimeMonth = startTimeMonth + contractPeriod%12
         endTimeDay = startTimeDay - 1;
      }
    }else {
      if(startTimeMonth + contractPeriod > 12) {
        endTimeYear = startTimeYear + 1;
       endTimeMonth = (startTimeMonth + contractPeriod%12)%12 === 0 ? 12 : (startTimeMonth + contractPeriod%12)%12
       endTimeDay = startTimeDay - 1;
      }else {
         endTimeYear = startTimeYear;
        endTimeMonth = startTimeMonth + contractPeriod%12
        endTimeDay = startTimeDay - 1;
      }
    }

    if(startTimeDay == 1 && startTimeMonth == 1 && contractPeriod%12 == 0) {
          endTimeYear = startTimeYear - 1;
          endTimeMonth = 12;
          endTimeDay = 31;
    }else if(startTimeDay == 1 && startTimeMonth == 2 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31;
    }else if (startTimeDay == 1 && startTimeMonth == 3 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          if(endTimeYear%4 == 0 && endTimeYear%100 !== 0 ||endTimeYear%400 == 0) {
              endTimeDay = 29;
          }else {
            endTimeDay = 28;
          }
          
    }else if (startTimeDay ==1 && startTimeMonth == 4 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if (startTimeDay ==1 && startTimeMonth == 5 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 30
    }else if (startTimeDay ==1 && startTimeMonth == 6 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if(startTimeDay ==1 && startTimeMonth == 7 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 30
    }else if (startTimeDay ==1 && startTimeMonth == 8 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if (startTimeDay ==1 && startTimeMonth == 9 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if (startTimeDay ==1 && startTimeMonth == 10 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 30
    }else if (startTimeDay ==1 && startTimeMonth == 11 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if(startTimeDay ==1 && startTimeMonth == 12 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 30
    }

    let expireTime =  endTimeYear + '-' +  (endTimeMonth < 10 ? '0'+endTimeMonth : endTimeMonth) + '-' +  (endTimeDay < 10 ? '0'+endTimeDay : endTimeDay)
    let totals = 0
    let contractRecord = this.state.contractList ? this.state.contractList : []
  //  console.log(contractRecord)
    contractRecord.map((item)=> {
           totals +=item.totalRent
    })

    const typeProps = getFieldProps('type', {
      initialValue: houseData.type,
      rules: [
        {required: true, message: '请选择房源所有权'},
      ],
      onChange:this.handleChangeType
    })

    return (
      <div>
        <Form inline form={this.props.form}>
          <div className="form-group">
            <h3><span>基本信息</span></h3>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="业主姓名">
                  <Input {...getFieldProps('ownerName', {
                    initialValue: houseData.ownerName,
                    rules: [{required: true, message: '业主姓名不可为空'}]
                  })}  />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="联系电话">
                  <Input {...getFieldProps('mobilePhone', {
                    initialValue: houseData.mobilePhone,
                    rules: [{required: true, message: '联系电话不可为空'}]
                  })} />
                </FormItem>
              </Col>
                 <Col sm={8}>
                <FormItem label="身份证号码">
                  <Input {...getFieldProps('ownerNo', {
                    initialValue: houseData.cardNo
                   
                  })} />
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="房屋户型">
                  <Select defaultValue="1" {...getFieldProps('bedroomCount', {initialValue: houseData.bedroomCount})}
                          style={{width: 47}} >
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>室</span>
                  <Select defaultValue="0" {...getFieldProps('hallCount', {initialValue: houseData.hallCount})}
                          style={{width: 47}} >
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>厅</span>
                  <Select defaultValue="0" {...getFieldProps('toiletCount', {initialValue: houseData.toiletCount})}
                          style={{width: 47}} >
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>卫</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="房屋楼层">
                  <span>第</span>
                  <Input {...getFieldProps('floor', {initialValue:this.state.floor.toString(),
                    rules: [{  whitespace: true, message: '请输入楼层' }, { validator: this.floor}]})}
                      autoComplete="off" style={{width: 50}}
                                          onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  />
                  <span>层，</span>

                </FormItem>
                <FormItem>
                  <span>共</span>
                  <Input {...getFieldProps('totalFloor', {initialValue:this.state.totalFloor.toString(),
                    rules: [{whitespace: true, message: '请输入总楼层'}, {validator: this.totalFloor}]})}
                      autoComplete="off" style={{width: 50}}
                                              onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  />
                  <span>层</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="装修情况">
                  <Select defaultValue="1"  {...getFieldProps('decorate', {initialValue: houseData.decorate})}
                          style={{width: 162}} >
                    <Option value="1">毛坯</Option>
                    <Option value="2">简装</Option>
                    <Option value="3">豪华</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="物业名称">
                  <Input {...getFieldProps('tenementName', {initialValue: houseData.tenementName,
                     rules: [{required: true, message: '物业名称不可为空'}]})} />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="房屋朝向">
                  <Select defaultValue="0" {...getFieldProps('orientation', {initialValue: houseData.orientation})}
                          style={{width: 162}} >
                    <Option value="0">坐北朝南</Option>
                    <Option value="1">坐南朝北</Option>
                    <Option value="2">坐西朝东</Option>
                    <Option value="3">坐东朝西</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="梯户比例">
                  <Select defaultValue="1" {...getFieldProps('elevatorCount', {initialValue: houseData.elevatorCount})}
                          style={{width: 70}} >
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>梯</span>
                  <Select defaultValue="1" {...getFieldProps('familyCount', {initialValue: houseData.familyCount})}
                          style={{width: 70}} >
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>户</span>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="房屋面积">
                  <Input {...getFieldProps('area', {initialValue: houseData.area,
                    rules: [{required: true, message: '房屋面积不可为空'},{validator: Utils.num}]})} style={{width: 162}} />
                  <span>㎡</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="是否有电梯">
                  <Select defaultValue="1" {...getFieldProps('isElevator', {initialValue: houseData.isElevator})}
                          style={{width: 162}} >
                    <Option value="1">是</Option>
                    <Option value="-1">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="阳台数量">
                  <Input defaultValue="0" {...getFieldProps('balconyCount', {initialValue: houseData.balconyCount,
                    rules: [{validator: Utils.number}]})} />
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="建筑类型">
                  <Select
                    defaultValue="build1" {...getFieldProps('buildTypeNid', {initialValue: (houseData.buildTypeNid ? houseData.buildTypeNid : 'build1')})}
                    style={{width: 162}} >
                    <Option value="build1">板楼</Option>
                    <Option value="build2">独栋</Option>
                    <Option value="build3">塔楼</Option>
                    <Option value="build4">联排</Option>
                    <Option value="build5">叠拼</Option>
                    <Option value="build6">板塔结合</Option>
                  </Select>
                </FormItem>
              </Col>
                 <Col sm={8}>
                <FormItem label="物业编号">
                  <Input {...getFieldProps('tenementNo', {initialValue: houseData.tenementNo})}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="房源所有权">
                  <Select {...typeProps}
                   style={{width: 162}}
                   disabled
                  >
                    <Option key="rent" value="rent">租赁</Option>
                    <Option key="own" value="own">自有</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            {/* <Row gutter={24}>
              <Col sm={24}>
                <div className="ant-form-item">
                  <label className="ant-form-item-required">房源地址</label>
                  <div className="">
                    <div className="ant-form-item-control ">
                      <Region areaId={this.state.areaId} ref="region" {...messages} onAreaChange={this.changeAreaId} />
                    </div>
                  </div>
                </div>
              </Col>
            </Row> */}
            <Row gutter={24}>
              <Col sm={24}>
                <div className="ant-form-item">
                  <label className="ant-form-item-required">房源地址</label>
                  <div className="">
                    <div className="ant-form-item-control ">
                      <Region areaId={this.state.areaId} ref="region" onAreaChange={this.changeAreaId}/>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={23} style={{marginLeft: 90}}>
                <FormItem>
                  <Input placeholder="示例:东直门外新中街阳光都市3-1302" {...getFieldProps('address',{initialValue: houseData.address}, {rules: [
                    { required: true,  message: '房源地址不可为空' }]})} style={{width: 550,'marginLeft':5}}/>&nbsp;&nbsp;
                  <Button type="primary" className="ant-btn ant-btn-ghost ant-btn-lg" onClick={this.getLocation}>获取地址</Button>&nbsp;&nbsp;
                  x：<Input {...getFieldProps('xAxis', {initialValue: houseData.xAxis} )} style={{width: 100}} />&nbsp;&nbsp;
                  y：<Input {...getFieldProps('yAxis', {initialValue: houseData.yAxis})}  style={{width: 100}}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={23}>
                <div className="ant-form-map">
                  <div class="map" id="allmap" className="ant-form-map-style"></div>
                </div>
              </Col>
            </Row>
            {/* <Row gutter={24}>
              <Col sm={22} style={{marginLeft: 90}}>
                <FormItem>
                  <Input {...getFieldProps('address', {initialValue: houseData.address,
                    rules: [{required: true, message: '房源地址不可为空'}]})} style={{width: 600}}/>
                </FormItem>
              </Col>
            </Row> */}
            <Row gutter={24}>
              <Col sm={24}>
                <FormItem label="周边配套">
                  <CheckboxGroup options={options} value={this.state.circumFacility} onChange={this.handleCheckBox}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={24}>
                <FormItem label="备注">
                  <Input type="textarea"
                         style={{width: 600}} {...getFieldProps('remark', {initialValue: houseData.remark})}/>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div className="form-group">
            <h3><span>账户管理</span></h3>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="业主开户银行">
                  <Select defaultValue="102" {...getFieldProps('bankName', {initialValue: enclosureData.bankName ? enclosureData.bankName : '102'})}
                          style={{width: 162}}>
                    {bankItem}
                  </Select>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="银行网点">
                  <Input {...getFieldProps('bankBranch', {initialValue: enclosureData.bankBranch})}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="银行账户">
                  <Input {...getFieldProps('bankAccount', {initialValue: enclosureData.bankAccount})}/>
                </FormItem>
              </Col>
            </Row>

            <Row gutter={24}>
            <Col sm={8}>
                <FormItem label="支付宝">
                  <Input {...getFieldProps('alipayName', {initialValue: contractData.alipayName})}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="业主户名">
                  <Input {...getFieldProps('accountName', {initialValue: enclosureData.accountName})}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="电表户号">
                  <Input {...getFieldProps('ammeterAmt', {initialValue: enclosureData.ammeterAmt})}/>
                </FormItem>
              </Col>
             
            </Row>
            <Row gutter={24}>
               <Col sm={8}>
                <FormItem label="水表户号">
                  <Input {...getFieldProps('watermeterAmt', {initialValue: enclosureData.watermeterAmt})}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="燃气是否开通">
                  <Select defaultValue="1" {...getFieldProps('isNatgas', {initialValue: enclosureData.isNatgas})}
                          style={{width: 162}}>
                    <Option value="1">是</Option>
                    <Option value="-1">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="门禁密码">
                  <Input {...getFieldProps('doorPwd', {initialValue: enclosureData.doorPwd})}/>
                </FormItem>
              </Col>
              
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="车位号">
                  <Input {...getFieldProps('carportNo', {initialValue: enclosureData.carportNo})}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="宽带账号">
                  <Input {...getFieldProps('broadbandNo', {initialValue: enclosureData.broadbandNo})}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="宽带密码">
                  <Input {...getFieldProps('broadbandPwd', {initialValue: enclosureData.broadbandPwd})}/>
                </FormItem>
              </Col>
            </Row>
          </div>
          {
            this.state.isOwn ? '' : 
            <div className="form-group">
              <h3><span>租赁信息</span></h3>
              <Row gutter={24}>
                  <Col sm={8}>
                  <FormItem label="付款方式">
                    <Select  {...getFieldProps('paymentWay', {
                      initialValue: contractData.paymentWay == -1 ? '-1' : '1',
                      onChange: this.changeWay
                    })} style={{width: 162}} >
                      <Option value="1">固定</Option>
                      <Option value="-1">不固定</Option>
                    </Select>
                  </FormItem>
                </Col>
                
              <Col sm={8}>
                    <FormItem label="房屋租金">
                      <Input {...getFieldProps('rent', {initialValue: String(this.state.contractData.rent),
                        rules: [{ required: this.state.isOwn ? false : (this.state.isFixed ? false : true),   message: '房屋租金不可为空' }]})}
                        />元/月
                    </FormItem>
                  </Col>
                  <Col sm={8}>
                  <FormItem label="业主收款渠道">
                    <Select  {...getFieldProps('collectNid', {initialValue: contractData.collectNid})} style={{width: 162}}>
                      <Option value="alipay">支付宝</Option>
                      <Option value="cashpay">现金</Option>
                      <Option value="bankpay">银行转账</Option>
                      <Option value="qqpay">微信</Option>
                      <Option value="4">其它</Option>
                    </Select>
                  </FormItem>
                </Col>

            
              </Row>
              <Row gutter={24} >
                <Col sm={8}>
                  <FormItem label="合约开始日期">
                    <DatePicker style={{width: 162}}
                      {...getFieldProps('startTime', {initialValue: startTimes,onChange: this.handleTime, rules: [{ required: this.state.isOwn ? false : (this.state.isFixed ? false : true),type: 'date',  message: '合约开始日期不可为空' }]})}
                                />
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="租赁期限(月)">
                      <Input {...getFieldProps('contractPeriod',{initialValue: String(this.state.contractData.contractPeriod)})}/>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="合约结束日期">
                    <DatePicker style={{width: 162, display: 'none'}}
                      {...getFieldProps('expireTime', {initialValue:  forms.startTime && contractPeriod ? expireTime : null })}
                                disabled />

                    <DatePicker style={{width: 162}}
                      disabled value={forms.startTime && contractPeriod ? expireTime : null}/>
                
                      {this.state.isFixed && forms.paymentWay !== '1'  ?<Button className="ant-btn-icon" onClick={this.add} style={{display: `${this.state.isFixed ? 'inLine' : 'none' }`}}><Icon type="plus" /></Button> : ''}
                    
                  </FormItem>
                </Col>
              </Row>
              
              {this.state.isFixed && forms.paymentWay !== '1'  ? <Collapse activeKey={this.state.activeKey} accordion onChange={this.handleCollapse} >
                <Panel header={'合约租金项'} key="1">
                  <ItemTable record={this.state.contractList} tenementContractId={this.props.location.state.tenementContractId}  synchronMethod={this.synchronData}/>
                </Panel>
              </Collapse> : null}
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="是否需要押金">
                    <Select defaultValue="1" {...getFieldProps('isDeposit', {
                      initialValue: contractData.isDeposit == 1 ? '1' : '-1',
                      onChange: this.handleDeposit
                    })} style={{width: 162}} >
                      <Option value="1">是</Option>
                      <Option value="-1">否</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="房屋押金">
                    <Input {...getFieldProps('deposit', {initialValue: contractData.deposit })}
                      />
                  </FormItem>
                </Col>
                {forms.paymentWay == 1 || !this.state.isFixed ?   
            
                <Col sm={8}>
                  <FormItem label="房屋付款周期">
                    <Select  {...getFieldProps('rentPeriod', {initialValue: contractData.rentPeriod == 3 ? '3' : contractData.rentPeriod == 6 ? '6' : '12'})}
                            style={{width: 162}} >
                      <Option value="1">月</Option>
                      <Option value="3">季</Option>
                      <Option value="6">半年</Option>
                      <Option value="12">年</Option>
                    </Select>
                  </FormItem>
                </Col> 
                :
                      <Col sm={8}>
                    <FormItem label="租金总计">
                    {this.state.isFixed ? <Input disabled value={totals}/> : <Input value={rent && contractPeriod ? rent * contractPeriod : ''} disabled/>}元
                      
                    </FormItem>
                </Col>
                  
                }
              
              </Row>
              <Row gutter={24}>
              {forms.paymentWay == 1 || !this.state.isFixed ?
                <Col sm={8}>
                    <FormItem label="租金总计">
                    {this.state.isFixed ? <Input disabled value={totals}/> : <Input value={rent && contractPeriod ? rent * contractPeriod : ''} disabled/>}元
                      
                    </FormItem>
                </Col>
                : 
                ''
              }
                
              </Row>
      
              <Row gutter={24}>
                <Col sm={24}>
                  <FormItem label="备注">
                    <Input type="textarea" style={{width: 600}} {...getFieldProps('cremark', {initialValue: contractData.cremark})}/>
                  </FormItem>
                </Col>
              </Row>
            </div>
          }
          
          <div className="form-group">
            <h3><span>房屋附件</span></h3>
            <p className="img-tips">提示：图片为png和jpg格式，且不大于5M</p>
            <Row gutter={24} className="pic-box">
              <Col sm={3}>
                <p className="label-text">房产证：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...credential}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
            <Row gutter={24} className="pic-box">
              <Col sm={3}>
                <p className="label-text">租赁合同：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...contract}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
            <Row gutter={24} className="pic-box">
              <Col sm={3}>
                <p className="label-text">小区外观图：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...appearance}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
            <Row gutter={24} className="pic-box">
              <Col sm={3}>
                <p className="label-text">户型图：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...apartment}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
            
            <Row gutter={24} className="pic-box">
              <Col sm={3}>
                <p className="label-text">其它：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...other}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
          </div>
          <Row gutter={24} style={{margin: 20}}>
            <Col sm={8} offset={3}>
              <FormItem label="">
                <Button type="primary"  loading={this.state.loading} onClick={this.handleSubmit}>提交</Button>
                <Button htmlType="button" onClick={this.handleBack} style={{marginLeft: 20}}>返回</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <Modal visible={this.state.priviewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" src={this.state.priviewImage} width="500"/>
        </Modal>
      </div>
    );
  }
});

Add = Form.create()(Add);
export default Add